import Vue from 'vue'
import VueRouter from '../vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
Vue.use(VueRouter); // 内部会帮我们创建两个全局组件 RouterLink RouterView

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children:[
      {
        path:'a', // /about/a
        component:{
          render(){
            return <h1>about-a页面</h1>
          }
        }
      },
      {
        path:'b', // /about/a
        component:{
          render(){
            return <h1>about-b页面</h1> 
          } // h('h1','xxx')
        }
      }
    ]
  }
]

// 在创造路由的时候 将组件和路径进行格式化操作
// /      => record{component:Home}
// /about => record(component:About)
// /about/a =>  record(component:a)
// /about/b =>  record(component:b)
const router = new VueRouter({
  mode: 'history',
  routes
})

router.beforeEach((from,to,next)=>{
  setTimeout(() => {
    console.log(1);
    next()
  }, 1000);
})
router.beforeEach((from,to,next)=>{
  setTimeout(() => {
    console.log(2);
    next()
  }, 1000);
})


// router.addRoutes([
//   {
//     path: '/about',
//     children:[
//       {
//         path:'xxx',
//         component:{
//           render:function(){
//             return <h1>xxx</h1>
//           }
//         }
//       }
//     ]
//   },
// ])

export default router
